@extends('home.layout.layout')
@section('title')
<title>{{$config->title}}</title>
@endsection
@section('style')
<style>
*{margin: 0;padding: 0;list-style:none;}
	#all{width: 690px;margin-top: 50px;margin-left: 225px;}
	#option{
		height: 38px;line-height:38px;
	}
	#option li{
		float: left;padding: 0 30px;
		background: #f5f5f5;
		height: 37px;cursor:pointer;
	}
	#card{
		border:1px solid #999;
    /*border-top:none;*/
    margin-top:-10px;
    border-radius:5px;
	}
	#card li{
		height: 250px;padding: 20px;display:none;
	}

	#option li.active{
		height: 38px;
		background: #fff;
	}
	#card li.active{
		display:block;
	}

	/*文字滚动*/
  #ul,.li{margin:0px; padding:0px;}
	#did{
		border:1px solid #BEBEBE;
		height:345px;
		width:250px;
		overflow:hidden;
		/*//一旦有超出部分隐藏之后就会出现滚动条 */
	}
	.li{
		padding-left:20px;
	}

	/*下载 微博 微信*/
	#pic div{
		display:none;
	}

	#name div.look{
		background: #BEBEBE;
	}
	#pic div.look{
		display:block;
	}
</style>
@endsection
@section('config')
<div class="col-xs-12 col-md-3  col-md-offset-1" style="text-align:center;">
  <img src="{{asset($config->logo)}}" style="" alt="北京仁爱慈善基金" >
</div>
@endsection
@section('con')
<div class="row">
    <div class="container" >
      <div class="col-md-12">
        <div class="col-xs-12 col-md-7 col-sm-offset-1">
            <div id="myCarousel" class="carousel slide">
              <!-- 轮播（Carousel）指标 -->
              <ol class="carousel-indicators">
                  @foreach($data as $k=>$v)
									@if($v->pid == 0)
                  <li data-target="#myCarousel" data-slide-to="{{$k}}" class=""></li>
									@endif
									@endforeach
              </ol>
              <!-- 轮播（Carousel）项目 -->
              <div class="carousel-inner">
                  <div class="item active">
                      <a href="{{url('home/index/tcacontent',['id'=>$one->id])}}"><img src="{{asset($one->img)}}" alt=""></a>
                  </div>
                  @foreach($data as $k=>$v)
                  @if($v->id != $one->id)
									@if($v->pid == 0)
                  <div class="item">
                      <a href="{{url('home/index/tcacontent',['id'=>$v->id])}}"><img src="{{asset($v->img)}}" alt=""></a>
                      <!-- <div class="carousel-caption"></div> -->
                  </div>
									@endif
                  @endif
                  @endforeach
              </div>
              <!-- 轮播（Carousel）导航 -->
              <a class="carousel-control left" href="#myCarousel"
                  data-slide="prev">
              </a>
              <a class="carousel-control right" href="#myCarousel"
                  data-slide="next">
              </a>
            </div>
        </div>

				<!-- 文字滚动 -->
        <div id="did">
        		<div id="item1">
          			<ul id="ul">
                    @foreach($loveuser as $kl => $vl)
          			    <li class="li">{{$vl->username}}&nbsp;&nbsp;&nbsp;{{$vl->time}}</li>
                    @endforeach
          			</ul>
        		</div>
        		<div id="item2"></div>
        	</div>
      </div>
    </div>
  </div>
	<!-- 下载 微博 微信 -->
	<div id="name" style="border:1px solid #BEBEBE;width:50px;height:300px;float:right;margin-top:-150px;margin-right:30px;">
			@foreach($down as $k=>$v)
			<div class="" style="width:50px;height:100px;text-align:center;line-height:100px;">
					{{$v->name}}
			</div>
			@endforeach
	</div>
	<div id="pic" style="height:300px;float:right;margin-top:-150px;margin-right:10px;">
				@foreach($down as $k=>$v)
				<div class="">
						<img src="{{$v->pic}}" width='150px' height='150px' />
				</div>
				@endforeach
	</div>
	<!-- 选项卡 -->
  <div id="all">
		<ul id="option">
      @foreach($datas as $k=>$v)
			<li class="">{{$v->title}}</li>
			@endforeach
		</ul>
		<ul id="card">
      <li class="active">
          @foreach($tabw as $ke=>$vl)
          <a id="aa" href="{{url('/home/index/content',['id'=>$vl->id])}}"><img src="{{$vl->logo}}" style="width:200px;height:100px;float:left;margin-left:10px;margin-top:10px;" alt="" /></a>
          @endforeach
      </li>
      @foreach($datas as $k=>$v)
      <li class="">
        @foreach($tabs as $ke=>$vl)
        @if($vl->pid != 0)
        @if($v->id == $vl->pid)
        <a id="aa" href="{{url('/home/index/content',['id'=>$vl->id])}}"><img src="{{$vl->logo}}" style="width:200px;height:100px;float:left;margin-left:10px;margin-top:10px;" alt="" /></a>
        @endif
        @endif
        @endforeach
      </li>
      @endforeach
		</ul>
	</div>
	<div class="" style="float:right;margin-top:-258px;margin-right:240px;">
			<a href="{{url('/homes/care/care')}}">
					<div class="" style="border:1px solid #BEBEBE;width:180px;height:50px;text-align:center;line-height:50px;">
							我要捐款
					</div>
			</a>
			<a href="{{url('/homes/ask')}}">
					<div class="" style="border:1px solid #BEBEBE;width:180px;height:50px;margin-top:15px;text-align:center;line-height:50px;">
							我要求助
					</div>
			</a>
			<a href="{{url('/homes/select')}}">
					<div class="" style="border:1px solid #BEBEBE;width:180px;height:50px;margin-top:15px;text-align:center;line-height:50px;">
							捐款查询
					</div>
			</a>
			<a href="{{url('/homes/useradd')}}">
					<div class="" style="border:1px solid #BEBEBE;width:180px;height:50px;margin-top:15px;text-align:center;line-height:50px;">
							加入我们
					</div>
			</a>
	</div>
@endsection
@section('js')
<script type="text/javascript">
		//轮播图js
		$('#search').click(function(){
         $('#inp-sea').toggle(1000);
     });
     // 轮播时间控制
     $('.carousel').carousel({
     interval: 3000
     })

		//选项卡js
    //获取所有的选项
    var options = document.getElementById('option').getElementsByTagName('li');
    //获取所有卡片
    var cards = document.getElementById('card').getElementsByTagName('li');
    //获取并删除第二个li
    var li = document.getElementById('card').firstElementChild.nextElementSibling;
    document.getElementById('card').removeChild(li);
    //给所有选项绑定单击事件
    for (var i = 0; i < options.length; i++) {
      //给选项添加属性  代表它当前的下标
      options[i].index = i;
      //给所有选项绑定单击事件
      options[i].onclick = function()
      {
        //当前点击的选项加上active,其它选项都移出 active
        for (var j = 0; j < options.length; j++) {
          //所有选项移出class
          options[j].className = '';
          cards[j].className = '';
        }
        //当前选项添加 class
        this.className = 'active';
        //当前卡 添加 class
        cards[this.index].className = 'active';
      }
    }

		//文字滚动js
		var did = document.getElementById("did");
		var item1 = document.getElementById("item1");
		var item2 = document.getElementById("item2");
		item2.innerHTML = item1.innerHTML;
		var m=0;
		//实现滚动效果
	var dd = setInterval(function (){
			m++;
      if(did.offsetHeight > item1.offsetHeight*2){
        did.removeChild(item2);
        clearInterval(dd);
      }
			//实现无缝滚动
			if(m>item1.offsetHeight){
				m=0;
			}
			did.scrollTop = m;
		},50);

		//下载,微博,微信的js
		var names = document.getElementById('name').getElementsByTagName('div');
		var pics = document.getElementById('pic').getElementsByTagName('div');
		for (var i = 0; i < names.length; i++) {
      //给选项添加属性  代表它当前的下标
      names[i].nums = i;
      //给所有选项绑定移入事件
      names[i].onmouseover = function()
      {
        //当前点击的选项加上look,其它选项都移出 look
        for (var j = 0; j < names.length; j++) {
          //所有选项移出class
          names[j].className = '';
          pics[j].className = '';
        }
        //当前选项添加 class
        this.className = 'look';
        //当前卡 添加 class
        pics[this.nums].className = 'look';
      }
			//给所有选项绑定移出事件
			names[i].onmouseout = function()
			{
				for (var j = 0; j < names.length; j++) {
					//所有选项移出class
					names[j].className = '';
					pics[j].className = '';
				}
			}
    }
</script>
@endsection

@extends('Home.layout.layout')

